import { WeaTab, WeaLocaleProvider } from 'ecCom';
import { observer } from 'mobx-react';
import { Button, Popover } from 'antd';
import DownloadCondition from './DownloadCondition'
import DataList from './list';
import DataPath from './path';
import DataAnalysis from './analysis';
import Condition from './Condition';
const getLabel = WeaLocaleProvider.getLabel;

import './index.less';
@observer
export default class DataViewRight extends React.Component {
    render() {
        const { store } = this.props;

        return (
            <div className="edc-data-view">
                <WeaTab
                    datas={store.tabs}
                    keyParam="key"  //主键
                    selectedKey={store.selectedTab}
                    searchType={store.searchType}
                    onChange={store.onChangeTab}
                    //onSearch={store.quickSearch}
                    //onSearchChange={store.changeQuickSearchValue}
                    //searchsBaseValue={store.quickSearchValue}

                    buttons={this.getButtons()}
                    showSearchAd={store.conditionVisible}
                    setShowSearchAd={store.setConditionVisible}
                    buttonsAd={this.getConditionButtons()}
                    searchsAd={<Condition store={store} />}
                />
                {store.selectedTab === 'data' && <DataList store={store} />}
                {store.selectedTab === 'path' && <DataPath store={store} />}
                {store.selectedTab === 'analysis' && <DataAnalysis store={store} />}
            </div>
        )
    }

    getConditionButtons = () => {
        const { store } = this.props;
        return [
            (<Button type="primary" onClick={store.search}>{getLabel('388113', '搜索')}</Button>),
            (<Button type="ghost" onClick={store.clearCondition}>{getLabel('2022', '重置')}</Button>),
            (<Button type="ghost" onClick={store.setConditionVisible.bind(this, false)}>{getLabel('31129', '取消')}</Button>)
        ]
    }

    getButtons = () => {
        const { store } = this.props;
        return store.selectedTab === 'data' ? [
            (<Button.Group>
                <Button onClick={() => store.excelStore.changeHAlign(0)} className={`tool-btn${store.excelStore.colAlign == 0 ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-left" /></Button>
                <Button onClick={() => store.excelStore.changeHAlign(1)} className={`tool-btn${store.excelStore.colAlign == 1 ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-center" /></Button>
                <Button onClick={() => store.excelStore.changeHAlign(2)} className={`tool-btn${store.excelStore.colAlign == 2 ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-right" /></Button>
            </Button.Group>),
            (<Button.Group><Button onClick={() => { store.excelStore.lockCol() }} className={`tool-btn${store.excelStore.colLock == 1 ? ' tool-btn-active' : ''}`}>锁定列</Button></Button.Group>),
            (<Button.Group>
                
                {/*dataTable改造,隐藏导入导出 
                <Button onClick={() => { store.doExcelExport() }} className={"`tool-btn` export-btn"}>{getLabel('17416', '导出')} </Button> */}
                <Popover overlayClassName='edc-ds-popover'
                    placement="bottomRight"
                    visible={store.downloadPopverVisible}
                    trigger="click"
                    onVisibleChange={store.showContent}
                    content={(
                        <DownloadCondition store={store}></DownloadCondition>
                    )}>


                    <Button onClick={() => { store.showExcelExport() }} className={"`tool-btn` export-btn-setting"}><i className="icon-coms-Flow-setting " /> </Button>

                </Popover>
            </Button.Group>)

        ] : []
    }

}